/*1.基本选择器
    1) 标签选择器
    2) 类选择器
    3) id选择器

*/
div{
    border: 1px solid;
}

h1{
     color:red;
}

.box{
    width: 100px;
    height: 100px;
}

#box1{
     background-color: #00FF00;
}

table,th,td{
     border: 1px solid;
}

/*
    3. 层次选择器
     1) 后代选择器
     2) 直接子元素选择器
     3) 相邻兄弟选择器
*/

.container{
      padding: 10px;
      background-color: #00FF00;
}

/*!*后代选择器*!*/
/*.container .row{*/
/*    background-color: #FF0000;*/
/*}*/

/*直接子元素选择器*/
.container>.row{
    background-color: #FF0000;
}

/*相邻兄弟选择器*/
.inner+div{
    background-color: aqua;
}

/*ui举例-面包屑导航*/

.breadcrumb li{
     float: left;
     margin-left: 20px;
     list-style-type: none;
}

.breadcrumb li+li:before{
    display: inline;
    content: "/";

}

/*伪类和伪元素*/

.btn {
    width: 80px;
}

.btn.btn-success{
     background-color: #00FF00;
}

.btn.btn-success:hover{
     background-color: #4a5b4a;
}

.box{
     width: 100px;
    height: 100px;
     border: 1px solid;
}

/*.box:hover{*/
/*     width: 130px;*/
/*     height: 130px;*/
/*}*/

.box:before{
    /*inline block inline-block*/
    display: inline;
    content: "--";
}

.box:after{
    display: inline;
    content: "!";
}

/*css3 选择器*/

